<template>
  <div class="info_02-top">
    <!-- 第一个区域跳转页 -->
    <!-- 中间部分 -->
    <div class="info_02-center">
      <!-- 左边部分 -->
      <div class="info_02-center-left">
        <h4 style="color:#555555">化工行业项目资料及解决方案</h4>
        <p>
          <a href="/index ">主页 »&nbsp;</a>
          <a href="/pjdata">SAP项目资料</a>
        </p>
      </div>
      <!-- 右边部分 -->
      <div class="info_02-center-right">
        <div class="info_02-center-right-sousuo" style="width:200px;">
          <input
            type="text"
            id="Keyword"
            name="keyword"
            required
            class="form-control input-sm"
            placeholder="搜索本站SAP资料"
          />
          <div class="input-group-btn">
            <input type="button" id="Search" class="btn btn-default btn-sm" value="Go!" />
          </div>
        </div>
      </div>
    </div>
    <!-- 内容部分 -->
    <div class="info_02-nr">
      <div class="info_02-nr-center">
        <!-- 内容部分的头部 -->
        <div class="nr-top">
          <i class="glyphicon glyphicon-user">作者：SAP刀客&nbsp;</i>
          <i class="glyphicon glyphicon-calendar">2017年出版&nbsp;</i>
          <i class="glyphicon glyphicon-folder-open">分类：sap</i>
          <div class="glyph-icon">
            <i class="glyphicon glyphicon-flash">3167</i>
          </div>
        </div>
        <!-- 内容部分，中间部分 -->
        <div class="nr-center">
          <p v-for="(item,index) in list[4]" :key="index">{{item.content}}</p>
        </div>
        <!-- 箭头部分 -->
        <div class="jiantou">
          <i class="el-icon-position"></i>
        </div>
        <!-- 链接部分 -->
        <div class="lianjie">
          <button class="denglu">
            请先登陆
            <br />￥5
          </button>
          <div class="lianjie-right">
            <p>如遇任何问题请联系客服微信ficodk！</p>
            <p>
              下载链接：
              <span>
                <button class="button-lj">化工行业项目资料及解决方案 密码：请登陆查看</button>
              </span>
            </p>
          </div>
        </div>
        <!-- 底部图片 -->
        <div class="info-bottom-tu">
          <div class="info-bottom-tu-01">
            <img src="../../assets/dpx-image/6365593928614883512316708.jpg" alt />
            Practical Guide to SAP Material Ledger
          </div>
          <div class="info-bottom-tu-02">
            <img src="../../assets/dpx-image/6363087735065716725016666.jpg" alt />
            SAP Press - Account Determination in SAP
          </div>
          <div class="info-bottom-tu-03">
            <img src="../../assets/dpx-image/6366319010691560439538740.jpg" alt />
            SAP SD英文培训视频2017年版
          </div>
          <div class="info-bottom-tu-04">
            <img src="../../assets/dpx-image/6365612938246343343120597.jpg" alt />
            SAP Press - SAP Business Planning and Consolidation 3rd edition
          </div>
          <div class="info-bottom-tu-05">
            <img src="../../assets/dpx-image/6365735537387994973361046.jpg" alt />
            SAP Press - SAP Business Planning and Consolidation 3rd edition
          </div>
          <div class="info-bottom-tu-06">
            <img src="../../assets/dpx-image/6363497476343836686902632.jpg" alt />
            SAP Press - Production Planning with SAP APO
          </div>
        </div>
        <!-- 右边部分 -->
        <div class="label-right" style="padding:10px 0px 10px 0px">
          <div
            class="label-right-01"
            style="margin-bottom:5px;padding:5px 5px 10px 5px;border-bottom-style:solid;border-bottom-color:#e7e7e7;border-bottom-width:1px"
          >
            <span
              style="padding-bottom:10px;margin-bottom:-10px;border-bottom-color:#f98181;border-bottom-style:solid;border-bottom-width:2px;font-size:14px"
            >图书标签</span>
          </div>
          <div class="eBook-label">
            <span
              v-for="(item, index) in bookLabel"
              :key="index"
              :class="['pad', 'label', csLabel(index)]"
            >
              {{item.txt}}
              <span class="badge">{{item.num}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div
      class="bottom-dd"
      style="color:#999999; font-family: Microsoft YaHei;text-align:center;font-size: 14px;"
    >
      本站所有电子书全部来自于互联网，欢迎大家给小编投稿+V:FICODK
      <p style="color:#999999; font-family: Microsoft YaHei; text-align:center;font-size: 14px;">
        © 2018 All Rights Reserved by SAPDOC.cn. |
        <a
          href
          style="color: #e5e5e5;  font-size: 14px;"
        >沪ICP备17005776号-3</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      bookLabel: []
    };
  },
  methods: {
    async getData() {
      const { data: res } = await this.$axios.get("/info");
      // console.log(res);
      for (let i = 1; i < 17; i++) {
        let jie = res.data.list.filter(item => item.mId == i);
        this.list.push(jie);
        // console.log(jie);
      }
    },
    // 彩色标签
    csLabel(n) {
      n = n % 6;
      switch (n) {
        case 0:
          return "label-default";
        case 1:
          return "label-primary";
        case 2:
          return "label-success";
        case 3:
          return "label-info";
        case 4:
          return "label-warning";
        case 5:
          return "label-danger";
      }
    },
    // 获取数据
    async getGod() {
      const { data: res } = await this.$axios.get("/eLabel");
      this.bookLabel = res.data.list;
      // console.log(res);
    }
  },
  created() {
    this.getData();
    this.getGod();
  }
};
</script>

<style lang="less" scoped>
.info_02-top {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 69px;
  border: 1px solid #e7e7e7;
}
.info_02-center {
  width: 1170px;
  height: 69px;
  margin: 0 auto;
}
.info_02-center-left {
  width: 855px;
  margin-left: 15px;
}
h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
p {
  color: #333;
}
a {
  color: #333;
  font-size: 13px;
}
.info_02-center-right {
  width: 285px;
  height: 46px;
  float: right;
  margin-top: -62px;
  margin-right: -65px;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
  top: -30px;
  left: 160px;
}
.info_02-nr {
  width: 100%;
  height: 800px;
  background-color: #fcf8e3;
  position: relative;
  top: -10px;
}
.info_02-nr-center {
  width: 765px;
  height: 740px;
  background-color: #fff;
  border: solid;
  border-color: #e7e7e7;
  border-width: 1px;
  margin-left: 190px;
  position: relative;
  top: 10px;
}
.nr-top {
  padding-bottom: 10px;
  padding-top: 15px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: dotted;
  border-bottom-color: #e7e7e7;
  border-bottom-width: 1px;
  font-size: 14px;
  color: #808080;
}
.glyph-icon {
  float: right;
}
.nr-center {
  width: 728px;
  height: 280px;
  font-size: 12px;
  color: #333;
  margin-left: 15px;
}
p {
  margin: 0 0 15px;
}
.jiantou {
  width: 728px;
  height: 40px;
  margin-left: 15px;
  margin-top: 30px;
  font-size: 22px;
  color: #808080;
}
.lianjie {
  width: 708px;
  height: 96px;
  background-color: #fcf8e3;
  margin-left: 15px;
}
.denglu {
  padding: 10px;
  margin: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #fff;
  background-color: #e58d83;
  text-align: center;
  border: 1px solid transparent;
}
.lianjie-right {
  width: 582px;
  height: 83px;
  margin-top: -80px;
  margin-left: 130px;
  font-size: 13px;
}
.button-lj {
  width: 338px;
  height: 34px;
  background-color: #ffffff;
  font-size: 14px;
  border: 1px solid;
  border-radius: 4px;
  border-color: #cccccc;
}
.button-lj:hover {
  background-color: #e6e6e6;
}
.info-bottom-tu {
  width: 758px;
  height: 258px;
  margin-top: 20px;
  font-size: 12px;
}
.info-bottom-tu-01 {
  float: left;
  width: 107px;
  height: 103px;
  margin-left: 15px;
}
.info-bottom-tu-02 {
  float: left;
  width: 107px;
  height: 218px;
  margin-left: 15px;
}
.info-bottom-tu-03 {
  float: left;
  width: 107px;
  height: 226px;
  margin-left: 15px;
}
.info-bottom-tu-04 {
  float: left;
  width: 107px;
  height: 227px;
  margin-left: 15px;
}

.info-bottom-tu-05 {
  float: left;
  width: 107px;
  height: 217px;
  margin-left: 15px;
}
.info-bottom-tu-06 {
  float: left;
  width: 107px;
  height: 237px;
  margin-left: 15px;
}
img {
  width: 107px;
  height: 139px;
}
.label-right {
  width: 330px;
  height: 350px;
  background-color: #ffffff;
  float: right;
  border: 1px solid;
  border-color: #e7e7e7;
  margin-top: -770px;
  position: relative;
  left: 350px;
  font-size: 14px;
  font-weight: bold;
}
.bottom-dd {
  width: 100%;
  height: 100px;
  background-color: #2e2e2e;
  padding: 20px 165px;
}
/******** 图书标签 */
.eBook-label {
  width: 100%;
  height: 100%;
  padding-left: 5px;

  span.pad {
    display: inline-block;
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: 400;
    margin-right: 3px;
  }

  span.badge {
    display: inline-block;
    min-width: 8px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: bold;
    color: #808080;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
  }
}
</style>